import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, InputNumber, Select } from 'antd'
import { getEventInformation } from '../../utils/request/get'

const CategoryServiceForm = forwardRef((props, ref) => {
    const [form] = Form.useForm()

    const [circulations, setCirculation] = useState([])
    const [types, setType] = useState([])
    const [risks, setRisk] = useState([])
    const { header } = props

    useEffect(() => {
        async function fetchData() {
            const { circulations, types, risks } = await getEventInformation()
            setCirculation(circulations)
            setType(types)
            setRisk(risks)
        }
        fetchData()
    }, [])

    return (
        <Form
            ref={ref}
            form={form}
            layout="vertical"
            name="form_in_modal"
        >
            <Form.Item
                name="categoryName"
                label={header['categoryName']}
                rules={[{
                    required: true,
                    message: '请输入主项名称'
                }]}
            ><Input placeholder='请输入主项名称' /></Form.Item>
            <Form.Item
                name="serviceName"
                label={header['serviceName']}
                rules={[{
                    required: true,
                    message: '请输入办理项名称'
                }]}
            ><Input placeholder='请输入办理项名称' /></Form.Item>
            <Form.Item
                name="circulation"
                label={header['circulation']}
                rules={[{
                    required: true,
                    message: '请选择流转情况'
                }]}
            >
                <Select placeholder='请选择流转情况'>
                    {
                        circulations && circulations.map(item => {
                            return <Select.Option key={item.id} value={item.title}>{item.title}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="type"
                label={header['type']}
                rules={[{
                    required: true,
                    message: '请选择事项类型'
                }]}
            >
                <Select placeholder='请选择流转情况'>
                    {
                        types && types.map(item => {
                            return <Select.Option key={item.id} value={item.title}>{item.title}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="risk"
                label={header['risk']}
                rules={[{
                    required: true,
                    message: '请选择风险等级'
                }]}
            >
                <Select placeholder='请选择流转情况'>
                    {
                        risks && risks.map(item => {
                            return <Select.Option key={item.id} value={item.title}>{item.title}</Select.Option>
                        })
                    }
                </Select>
            </Form.Item>
            <Form.Item
                name="timeLimit"
                label={header['timeLimit']}
                rules={[{
                    required: true,
                    message: '请选择办结时限(必须为数字)'
                }]}
            ><InputNumber placeholder='请输入办结时限' style={{ width: "100%" }} /></Form.Item>
            <Form.Item
                name="name"
                label={header['bankName']}
            ><Input placeholder='请输入银行类别/开户行' /></Form.Item>
            <Form.Item
                name="owner"
                label={header['owner']}
            ><Input placeholder='请输入银行卡户名/单位账户' /></Form.Item>
            <Form.Item
                name="number"
                label={header['number']}
            ><Input placeholder='请输入银行账号/单位账号' /></Form.Item>
        </Form>
    )
})

export default CategoryServiceForm